<template>
  <section class="c-text-hidden" :class="!isSetPageBackground ? 'c-bg-white' : ''">
    <div class="c-pv24" :style="getVerticalSpacing(marginSettings)">
      <p class="c-fs28 c-ph24 c-text-ellipsis1" :class="pageTextColor ? 'pageTextColor' : 'c-fc-xblack'" :style="getHeadLineTitle(headLine, 0) + getHorizontalSpacing(marginSettings)" v-if="item.topTitleVisible">{{item.topTitle}}</p>
      <div class="c-ph24 c-pt20" :style="getHorizontalSpacing(marginSettings) + getVerticalSpacing(marginSettings)">
        <div class="c-p c-pb24 c-pt48 c-ph24 br-b12 c-text-hidden" v-if="item.typography && item.typography == 2">
          <img :src="item.bgStyle == 0 ? item.backgroundImg : bgMap2[item.bgStyle]" class="c-pa c-w100 c-p-t0 c-p-l0" alt="">
          <div class="c-p">
            <img :src="$addXossFilter(item.imgUrl, require('@/assets/defult_head.png'))" class="img-pe-none c-ww160 c-hh160 c-pa c-p-t0 c-p-l0">
            <div class="c-pl20 c-pr32 c-flex-row c-p c-pz1 c-hh132">
              <div class="ml164 c-p c-w0 c-flex-grow1">
                <p class="c-fs26 c-text-ellipsis1 c-mb10 c-fc-xblack c-lh36 c-fw-b">{{item.title}}</p>
                <div class="c-fc-sblack c-p" @click="clickDesceModal">
                  <div class="c-fs20 c-lh34 c-ws-pw" :class="showUpDown ? 'c-text-ellipsis2' : ''" ref="desc">{{item.desc}}</div>
                  <i v-if="showUpDown" class="c-fs20 c-lh34 c-hh34 c-pa c-p-r-20 c-p-b0 c-fstyle-n c-flex-row c-aligni-center iconfont">&#xe635;</i>
                </div>
              </div>
            </div>
          </div>
          <div class="c-br20 c-ph24 c-p c-bg-white c-pv20 c-mt8">
            <div v-for="(it, index) in item.items" :key="index" @click="linkToDetail(it)" :class="index == item.items.length -1 ? '' : 'c-mb30'">
              <div class="c-fc-xblack c-fs24 c-flex-row c-aligni-center">
                <template v-if="visible.prodTypeVisible">
                  <span class="c-fs16 c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4" :class="item.bgStyle == 0 ? 'c-bd1-ccc c-fc-sblack' : item.bgStyle == 1 ? 'bg-9ABDE1 c-fc-white' : item.bgStyle == 2 ? 'bg-EDE8DB fc-675648' : 'bg-FFF1E5 c-fc-xlblown'" v-if="it.relationType * 1 == 0">{{prodMapType[it.prodType]}}</span>
                  <span class="c-fs16 c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4" :class="item.bgStyle == 0 ? 'c-bd1-ccc c-fc-sblack' : item.bgStyle == 1 ? 'bg-9ABDE1 c-fc-white' : item.bgStyle == 2 ? 'bg-EDE8DB fc-675648' : 'bg-FFF1E5 c-fc-xlblown'" v-else>{{it.relationType * 1 == 1 ? '限时购' : '拼团'}}</span>
                </template>
                <span class="c-w0 c-flex-grow1 c-text-ellipsis1 c-lh28">{{it.relationType * 1 == 0 || it.relationType * 1 == 1 ? it.name : it.title}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="c-br6 c-text-hidden c-bg-white" v-else-if="!item.typography || (item.typography && item.typography == 1)">
          <div class="c-p c-text-hidden">
            <img :src="item.bgStyle == 0 ? item.backgroundImg : bgMap[item.bgStyle]" class="c-pa c-w100 c-p-t0 c-bd1-f6 noBorBottom c-br-t6" alt="">
            <div class="c-pl20 c-pr32 c-flex-row c-pv15 c-p c-pz1" :class="showUpDown ? 'c-aligni-start' : 'c-aligni-center'">
              <img :src="$addXossFilter(item.imgUrl, require('@/assets/defult_head.png'))" class="c-brp50 img-pe-none c-ww100 c-hh100 c-bd2-white">
              <div class="c-ml20 c-p c-w0 c-flex-grow1">
                <p class="c-fs24 c-fw-b c-text-ellipsis1 c-mb10 c-fw-b" :class="item.bgStyle == 1 ? 'c-fc-white' : 'c-fc-xblack'">{{item.title}}</p>
                <div class="c-p" :class="item.bgStyle == 1 ? 'c-fc-white' : 'c-fc-sblack'" @click="clickDesceModal">
                  <div ref="desc" class="c-fs20 c-fw-b c-lh34 c-ws-pw c-p" :class="showUpDown ? 'c-text-ellipsis3' : ''">{{item.desc}}</div>
                  <i v-if="showUpDown" class="c-fs20 c-lh34 c-hh34 c-pa c-p-r-20 c-p-b0 c-fstyle-n c-flex-row c-aligni-center iconfont">&#xe635;</i>
                </div>
              </div>
            </div>
          </div>
          <div class="c-br-bl6 c-br-br6 c-ph20 c-bd1-f6 noBorTop" :class="item.items && item.items.length > 3 ? 'c-pv10' : 'c-pv18'">
            <div v-for="(it, index) in item.items" :key="index" @click="linkToDetail(it)">
              <div class="c-fc-xblack c-fs24 c-flex-row c-aligni-center" :class="[item.items && item.items.length > 3 && (index != (item.items.length - 1)) ? 'c-bd-b1' : '', item.items && item.items.length > 3 ? 'c-pv28' : 'c-pv18']">
                <template v-if="visible.prodTypeVisible">
                  <span class="c-fs16 c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4" :class="item.bgStyle == 2 || item.bgStyle == 0 ? 'c-bd1-ccc c-fc-sblack': (item.bgStyle == 1 ? 'c-bg-678BB6 c-fc-white' : 'c-bg-EDE8DB c-fc-787163')" v-if="it.relationType * 1 == 0">{{prodMapType[it.prodType]}}</span>
                  <span class="c-fs16 c-mr10 c-textAlign-c c-br4 c-lh c-pv4 c-ph4" :class="item.bgStyle == 2 || item.bgStyle == 0 ? 'c-bd1-ccc c-fc-sblack': (item.bgStyle == 1 ? 'c-bg-678BB6 c-fc-white' : 'c-bg-EDE8DB c-fc-787163')" v-else>{{it.relationType * 1 == 1 ? '限时购' : '拼团'}}</span>
                </template>
                <span class="c-w0 c-flex-grow1 c-text-ellipsis1 c-lh28">{{it.relationType * 1 == 0 || it.relationType * 1 == 1 ? it.name : it.title}}</span>
              </div>
            </div>
          </div>
        </div>
        <div v-if="item.isShowMoreBottom" class="c-fs20 c-textAlign-c c-pt24 c-flex-row c-flex-center" @click="clickMore">
          <div class="c-ph12 c-pv6 theme-fc theme-bg-10 c-br20" :style="getMoreColor(headLine) + getHeadLineMore(headLine)">查看更多</div>
        </div>
      </div>
    </div>
    <cj-popup v-model="showDesc" round :close-on-click-overlay="true" class="changeline-popup c-pv40">
      <div class="c-fw-b c-fs28 c-pb20 c-textAlign-c c-fc-xblack">导师简介</div>
      <div class="c-ph40 c-pb40">
        <div class="c-ww424 c-fs22 c-contexty-scroll c-lh36 c-fc-xblack c-ws-pw">{{item.desc}}</div>
      </div>
      <div class="c-fs22 c-fc-white c-br32 c-hh64 c-lh64 c-ww192 theme-bg c-textAlign-c c-m-0auto" @click="clickDesceModal">我知道了</div>
    </cj-popup>
  </section>
</template>
<script>
import { appRouterChange } from "@/mixin/appRouterPush.js";
import { goDetails } from "@/utils/goDetails.js";
import { customStyle } from '@/utils/customStyle.js';
import { custIndex } from "@/mixin/custIndex.js";
export default {
  name: 'tutorModule',
  mixins: [appRouterChange, customStyle, custIndex],
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    visible:{
      type: Object,
      default: () => {
        return {
          prodTypeVisible: true, // 是否显示产品类型
        }
      },
    },
  },
  computed: {
    marginSettings() {
      return this.item.styleParam && this.item.styleParam.marginSettings ? this.item.styleParam.marginSettings : null
    },
    headLine() {
      return this.item.styleParam && this.item.styleParam.headLine ? this.item.styleParam.headLine : null
    }
  },
  data() {
    return {
      isUp: true, // 展开收起状态
      ckfrom: global.ckFrom,
      prodMapType: global.prodMapType,
      showUpDown: false, // 是否展示展开收起按钮
      bgMap: {
        1: 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/tutorBg1-1.png',
        2: 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/tutorBg2-1.png',
        3: 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/tutorBg3-1.png',
      },
      bgMap2: {
        1: 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/index/tutorBg1-2.png',
        2: 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/index/tutorBg2-2.png',
        3: 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/index/tutorBg3-2.png',
      },
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      pageTextColor: sessionStorage.getItem('pageTextColor') || '',
      showDesc: false, // 展示查看简介详情
    };
  },
  watch: {
  },
  created() {
  },
  activated() {
    this.$nextTick(() => {
      if (
        this.$refs.desc &&
        (
          ((!this.item.typography || (this.item.typography && this.item.typography == 1)) && this.$refs.desc.clientHeight > 65) ||
          ((this.item.typography && this.item.typography == 2) && this.$refs.desc.clientHeight > 44)
        )
      ) {
        this.showUpDown = true
      }
    })
  },
  methods: {
    clickMore() {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      this.commonModuleRouterPush(this.item.moreInfo)
    },
    clickDesceModal() {
      this.showDesc = !this.showDesc;
    },
    // // 切换上下展示
    // toggleUpDown() {
    //   this.isUp = !this.isUp;
    // },
    // 无营销跳转详情
    linkToDetail(item) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      if (item.relationType * 1 == 1) {
        this.goSales(item);
        return
      }
      if (item.relationType * 1 == 2) {
        this.goCollage(item);
        return
      }
      let prodType = item.cProdType == this.ckfrom.course ? item.cProdType : item.prodType;
      let prodId = item.prodType == global.ckFrom.camp ? item.subId : item.id
      goDetails(this, prodType, prodId, '', item.courseType, 1);
    },
    // 拼团跳转
    goCollage(item) {
      let prodType = item.prodType;
      let prodId = item.prodType == this.ckfrom.collageActivity || item.prodType == this.ckfrom.activity ? item.activityId : item.prodId;
      let query = {}
      if (prodType == this.ckfrom.collageVip || prodType == this.ckfrom.collageSvip || prodType == this.ckfrom.vip || prodType == this.ckfrom.svip) {
        if (item.status < 3) {
          query.isCollage = true;
        } else {
          prodType = this.ckfrom.vip;
        }
      }
      goDetails(this, item.prodType, prodId, query, item.courseType, 1);
    },
    // 限时购跳转
    goSales(item) {
      let prodType = item.prodType;
      let prodId = item.prodType == this.ckfrom.flashSalesActivity || item.prodType == this.ckfrom.activity ? item.activityId : item.prodId;
      let query = {}
      if (prodType == this.ckfrom.flashSalesReservation || prodType == this.ckfrom.reservation) {
        query.from = 'reservation';
      }
      if (prodType == this.ckfrom.flashSalesVip || prodType == this.ckfrom.flashSalesSvip || prodType == this.ckfrom.vip || prodType == this.ckfrom.svip) {
        if (item.sales.status == 1 || item.sales.status == 2) {
          query.isSales = true;
        } else {
          prodType = this.ckfrom.vip;
        }
      }
      goDetails(this, item.prodType, prodId, query, item.courseType, 1);
    },
  },
};
</script>

<style scoped>
.c-br-tl6 {
  border-top-left-radius: 0.15rem;
}
.c-br-tr6 {
  border-top-right-radius: 0.15rem;
}
.c-br-bl6 {
  border-bottom-left-radius: 0.15rem;
}
.c-br-br6 {
  border-bottom-right-radius: 0.15rem;
}
.c-p-r-20 {right: -0.5rem;}
.c-p-t106 {top: 2.65rem;}
.transition {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.c-bd1-f6 {
  border: 1px solid #f6f6f6;
}
.c-p-t82 {
  top: 2.05rem;
}
.c-p-l1 {
  left: 1px;
}
.noBorTop {
  border-top: 0px
}
.noBorBottom {
  border-bottom: 0px;
}
.c-br-t6 {
  border-top-left-radius: 0.15rem;
  border-top-right-radius: 0.15rem;
}
.c-bg-678BB6 {
  background-color: #678BB6;
}
.c-bg-EDE8DB {
  background-color: #EDE8DB;
}
.c-fc-787163 {
  color: #787163;
}
.ml164 {
  margin-left: 4.1rem;
}
.c-text-ellipsis12 {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 12; overflow: hidden;}
.br-b12 {
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.bg-9ABDE1 {
  background-color: #9ABDE1;
}
.bg-EDE8DB {
  background-color: #EDE8DB;
}
.bg-FFF1E5 {
  background-color: #FFF1E5;
}
.fc-675648 {
  color: #675648;
}
</style>
